<!-- This partial include Add Pet Visit and Success Modals -->

<!-- Add Pet Visit Modal -->
<div class="modal modal-owner fade" id="addPetVisitModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <div class="container">
          <div class="row">
            <div class="col-md-4 col-md-offset-4">
              <h1 class="sub-header">New Visit</h1>
              <em class="text-muted">Fill up pet visit basic information</em>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-body">
        <div class="container">
          <div class="row">
            <div class="col-md-4 col-md-offset-4">
              <div class="form-group">
                <label for="petName">Pet Name</label>
                <input type="text" class="form-control" id="petName" value="Basil" readonly>
              </div>
              <div class="form-group">
                <label for="visitDate">Visit Date</label>
                <input type="text" class="form-control" id="visitDate">
              </div>
              <div class="form-group">
                <label for="visitDesc">Description</label>
                <textarea class="form-control" rows="3" id="visitDesc"></textarea>
              </div> 
              <div class="form-group form-group-action">
                <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#addPetVisitSuccessModal" data-dismiss="modal" aria-label="Close">Add Visit</button>
                <button class="btn btn-link" class="close" data-dismiss="modal" aria-label="Close">Cancel</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Edit Pet Success Modal -->
<div class="modal modal-owner fade" id="addPetVisitSuccessModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <div class="container">
          <div class="row">
            <div class="col-md-8 col-md-offset-2">
              <h1 class="sub-header">Pet visit added successfully!</h1>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-body">
        <div class="container">
          <div class="row">
            <div class="col-md-8 col-md-offset-2">
              <div class="alert alert-success" role="alert">
                Well done! You've successfully added a pet visit.
              </div>
              <div class="form-group form-group-action">
                <button class="btn btn-primary" data-dismiss="modal" aria-label="Close">Close</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>